<template>
  <div class="app-container">
    <!-- 头部按钮组 -->
    <menu-button ref="menuButton" @handleChange="openWin" />
    <!-- 表格 -->
    <StuTable
      :selection="true"
      :selectionList.sync="selectionList"
      max-height="700"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :stripe="true"
      border
      :list="tableData"
      :handles="handles"
      :columns="columns"
      @handleClick="handleClick"
    >
      <!--序号-->
      <template v-slot:index="{ scope }">
        <div class="index">
          <span>
            {{
              (pageConfig.page - 1) * pageConfig.pageSize + scope.$index + 1
            }}</span
          >
        </div>
      </template>

      <!--排序 -->
      <template v-slot:preview="{ scope }">
        <div class="preview-box">
          <img class="icon-preview" :src="scope.row.filePath" alt="" />
          <div class="preview-rt-box">
            <div class="preview-content">
              <span class="preview-typeName">{{ scope.row.typeName }}</span>
              <span class="preview-enName">{{ scope.row.enName }}</span>
            </div>
            <img class="fileIoc" :src="scope.row.fileIoc" alt="" />
          </div>
        </div>
      </template>

      <!--排序 -->
      <template v-slot:sort="{ scope }">
        <div class="sort-box">
          <i
            @click="handleSort(scope, 1)"
            class="el-icon-top"
            :class="{ display: scope.$index == 0 }"
          />
          <i
            @click="handleSort(scope, 0)"
            class="el-icon-bottom"
            :class="{ display: scope.$index + 1 == tableData.length }"
          />
        </div>
      </template>

      <!-- 状态修改 -->
      <template v-slot:ifStop="{ scope }">
        <div
          class="switch-btn"
          @click.prevent.stop="clickSwitch(scope.row.ifStop, scope.row.uuid)"
        >
          <el-switch
            :active-value="0"
            :inactive-value="1"
            v-model="scope.row.ifStop"
            active-color="#67C23A"
            inactive-color="#F52929"
          >
          </el-switch>
        </div>
      </template>
    </StuTable>

    <!-- 分页 -->
    <!-- <Pagination
      :total="pageConfig.total"
      :page.sync="pageConfig.page"
      :pageSizes="undefined"
      :pageSize.sync="pageConfig.pageSize"
      @pagination="getPagination" 
    />-->

    <!-- 新增 -->
    <AddCategory
      v-if="dialogs.addCategory"
      :visible.sync="dialogs.addCategory"
      :info="dialogs.row"
      @updateData="getProductTypeList"
    />

    <!-- 编辑 -->
    <EditCategory
      v-if="dialogs.editCategory"
      :visible.sync="dialogs.editCategory"
      :info="dialogs.row"
      @updateData="getProductTypeList"
    />
  </div>
</template>

<script>
import {
  getProductTypeList,
  inOrUpProductType,
  delProductType,
  updateSort
} from "@/api";
import AddCategory from "./components/AddCategory";
import EditCategory from "./components/EditCategory";
export default {
  name: "ProductCategory",
  components: {
    AddCategory,
    EditCategory
  },
  data() {
    return {
      //表单数据--------------------------------------------
      tableData: [],
      //表单配置--------------------------------------------
      columns: [
        // 表格的表头数据及其参数名称
        { name: "序号", value: "index", slotName: "index" },
        { name: "分类名称", value: "typeName" },
        { name: "预览", value: "preview", width: "400", slotName: "preview" },
        { name: "排序", value: "sort", slotName: "sort" },
        { name: "状态", value: "ifStop", slotName: "ifStop" }
      ],
      //选中的数据--------------------------------------------
      selectionList: [],
      //表格的操作列--------------------------------------------
      handles: {
        name: "操作",
        width: "200",
        show: true,
        btns: [
          {
            name: "编辑",
            type: "edit",
            show: true,
            btnType: "text",
            directive: "fun_70_SRGRKy"
          }
        ]
      },
      //分页数据--------------------------------------------
      pageConfig: {
        total: 10,
        page: 1,
        pageSize: 10
      },

      //弹窗--------------------------------------------
      dialogs: {
        // 新增分类
        addCategory: false,
        //编辑
        editCategory: false,
        row: {}
      }
    };
  },

  created() {
    this.getProductTypeList();
  },

  methods: {
    openWin(e) {
      switch (e.name) {
        case "删除":
          this.delProductType();
          break;
        case "新增":
          this.dialogs.addCategory = true;
          break;
        default:
          break;
      }
    },
    //获取商品信息--------------------------------------------
    async getProductTypeList() {
      const shopUuid = this.$store.getters.shopUuid;
      const params = {
        page: this.pageConfig.page,
        pageSize: this.pageConfig.pageSize,
        shopUuid
      };
      let res = await getProductTypeList(params).catch(err => console.log(err));
      if (!res) return;
      this.tableData = res.items;
      this.$set(this.pageConfig, "total", res.total);
    },

    //排序--------------------------------------------
    handleSort(scope, type) {
      //不排序--------------------------------------------
      if (
        (scope.$index == 0 && type == 1) ||
        (scope.$index + 1 == this.tableData.length && type == 0)
      ) {
        return;
      }
      //提醒--------------------------------------------
      this.$confirm(
        `此操作将${type == 1 ? "升序" : "降序"}, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          console.log(21321);
          const data = {
            isSort: type,
            uuid: scope.row.uuid
          };
          updateSort(data).then(res => {
            if (res.state == 100) {
              this.getProductTypeList();
              this.$message({
                type: "success",
                message: res.msg
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改"
          });
        });
    },

    //删除产品--------------------------------------------
    delProductType() {
      console.log(this.selectionList);
      if (this.selectionList.length == 0)
        return this.$message({
          type: "warning",
          message: "请选择需要删除的数据"
        });

      this.$confirm(`此操作将删除选中的数据, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let uuid = "";
          this.selectionList.forEach(item => (uuid += item.uuid + ","));
          const data = {
            uuid
          };
          delProductType(data).then(res => {
            if (res.state == 100) {
              this.getProductTypeList();
              this.$message({
                type: "success",
                message: res.msg
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //修改商品--------------------------------------------
    async inOrUpProductType(data) {
      const res = await inOrUpProductType(data);
      if (res.state == 100) {
        this.getProductTypeList();
        this.$message({
          type: "success",
          message: res.msg
        });
      }
    },

    //switch按钮--------------------------------------------
    clickSwitch(number, uuid) {
      this.$confirm(
        `此操作将${number == 0 ? "禁用" : "开启"}厂家, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          const data = {
            uuid,
            ifStop: number == 0 ? 1 : 0
          };
          this.inOrUpProductType(data);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改"
          });
        });
    },

    //操作点击--------------------------------------------
    handleClick(row, type) {
      switch (type) {
        case "edit":
          this.dialogs.editCategory = true;
          this.dialogs.row = row;
          break;
        default:
          break;
      }
    },

    //分页数据-------------------------------------------
    getPagination(data) {
      this.$set(this.pageConfig, "page", data.page);
      this.$set(this.pageConfig, "pageSize", data.pageSize);
      this.getProductTypeList();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/element-ui.scss";
.app-container {
  // 排序
  .sort-box {
    font-size: 20px;

    & > i {
      margin: 0 10px;
      cursor: pointer;
      color: $--color-primary;
    }

    & > .display {
      color: #c8c8c8;
      cursor: no-drop;
    }
  }
  // 预览
  .preview-box {
    display: flex;
    justify-content: center;
    align-items: center;
    .icon-preview {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      position: relative;
      z-index: 1;
    }

    .preview-rt-box {
      position: relative;
      display: flex;
      align-items: center;
      width: 213px;
      height: 48px;
      background: #ffffff;
      box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
      padding-left: 22px;
      &::before {
        content: "";
        width: 25px;
        height: 52px;
        background-color: #f6f6f6;
        border-radius: 0 52px 52px 0;
        position: absolute;
        left: -12px;
      }

      .preview-content {
        display: flex;
        flex-direction: column;
        .preview-typeName {
          font-size: 13px;
          line-height: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #646464;
          text-align: left;
        }

        .preview-enName {
          margin-top: 6px;
          font-size: 12px;
          line-height: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #c8c8c8;
          text-align: left;
        }
      }

      .fileIoc {
        position: absolute;
        right: 13px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
      }
    }
  }

  // 状态修改
  .switch-btn {
    width: 40px;
    cursor: pointer;
    margin: 0 auto;
    .el-switch {
      pointer-events: none;
    }
  }
}
</style>
